
<template>
    <div>
        <router-link to="/home">home</router-link> /
        <router-link to="/aaa">aaa</router-link> /
        <router-link to="/provide">provide</router-link> /
        <router-link to="/jsx">jsx</router-link> /
        <router-link to="/prop_emit">prop_emit</router-link> /
        <router-link to="/hook">hook</router-link> / 
        <span @click="dialogShow">dialog</span> / 
        <router-link to="/html2pdf">html2pdf</router-link> / 
        <router-link to="/editor">editor</router-link> / 
    </div>
    <img src="./assets/logo.png" alt="" />

    <!-- wrap() 解决 keepAlive 热更新问题 -->
    <!-- <component :is="wrap(route.fullPath, Component)" :key="route.name"></component> -->
    <router-view v-slot="{ Component }">
        <!-- <keep-alive> -->
        <component :is="Component"></component>
        <!-- </keep-alive> -->
    </router-view>
</template>

<script lang="ts">
  export default {
    name: "App",
  };
  </script>

<script setup lang="ts">
import { h } from "vue";
import { useRoute } from "vue-router";


import dialog from '@/views/dialog/dialog.js'
let dialogShow = () => {
  dialog('111111111', {
    title: '22222',
    message: '111111111111111111111',
    submitClick: () => {
      console.log( 'dialog 确认' );
    }
  })
}




const route = useRoute();
const wrapperMap = new Map()
function wrap(fullPath, component) {
  let wrapper
  // 重点就是这里，这个组件的名字是完全可控的，
  // 只要自己写好逻辑，每次能找到对应的外壳组件就行，完全可以写成任何自己想要的名字
  // 这就能配合 keep-alive 的 include 属性可控地操作缓存
  if (component) {
    const wrapperName = fullPath
    if (wrapperMap.has(wrapperName)) {
      wrapper = wrapperMap.get(wrapperName)
    } else {
      wrapper = {
        name: wrapperName,
        render() {
          return h("div", { className: "vaf-page-wrapper" }, component)
        },
      }
      wrapperMap.set(wrapperName, wrapper)
    }
    return h(wrapper)
  }
}
</script>

<style scoped>
.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
}

.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}
span{
  color: #646cff;
  cursor: pointer;
}
</style>
